<template>
    <nav-bar>
        <template v-slot:default>商品详情</template>
    </nav-bar>
    <div class="detailList">
        <h3 class="title">书名：{{list[id].title}}</h3>
        <img :src="list[id].url" alt="">
        <h4 class="price">单价：<span>￥{{list[id].price}}</span></h4>

        <el-button type="primary">
            加入购物车
        </el-button>
        <el-button type="success">
            立即购买
        </el-button>
    </div>

</template>

<style>
.title,.price{
    text-align: left;
    margin: 10px;
}
.price span{
    color: red;
}
.detailList{
    margin-top: 60px;
}
img{
    width: 100%;
}
</style>

<script>
import { reactive, toRefs } from "vue";
import NavBar from "../../components/common/navbar/NavBar";
import { useRouter } from "vue-router";

export default {
    components: {NavBar},
    setup(){
        const router = useRouter();
        const state = reactive({
            id:0,
            list:[
            ],
        })
        let MyList = [
            {
                id:1,
                url: require('../../assets/images/rjsg.jpg'),
                title: '人间失格',
                price: 88,
                collectCount: 58
            },
            {
                id:2,
                url: require('../../assets/images/shj.jpg'),
                title: '山海经',
                price: 88,
                collectCount: 58
            },
            {
                id: 3,
                url: require('../../assets/images/zzgjdl.jpg'),
                title: '中国国家地理杂志',
                price: 88,
                collectCount: 58
            },
            {
                id:4,
                url: require('../../assets/images/cg.jpg'),
                title: '茶馆',
                price: 56,
                collectCount: 66
            },
            {
                id:5,
                url: require('../../assets/images/zbycy.jpg'),
                title: '自卑与超越',
                price: 92,
                collectCount: 23
            },
            {
                id: 6,
                url:require('../../assets/images/st.jpg'),
                title: '三体',
                price: 56,
                collectCount: 63
            },
            {
                id:7,
                url:require('../../assets/images/bxtbl.jpg'),
                title: '别想太多了',
                price: 23,
                collectCount: 89
            },
            {
                id: 8,
                url: require('../../assets/images/aqzz.jpg'),
                title: '阿Q正传',
                price: 74,
                collectCount: 12
            },
            {
                id: 9,
                url: require('../../assets/images/dnzzywx.jpg'),
                title: '电脑组装与维修',
                price: 132,
                currentType: 45
            },
            {
                id: 10,
                url: require('../../assets/images/JavaWeb.jpg'),
                title: 'JavaWeb',
                price: 91,
                currentType: 45
            },
            {
                id: 11,
                url: require('../../assets/images/python.jpg'),
                title: 'Python从入门到实战',
                price: 114,
                currentType: 65
            },
            {
                id: 12,
                url: require('../../assets/images/cyy.jpg'),
                title: 'C语言从入门到精通',
                price: 126,
                currentType: 61
            },
            {
                id: 13,
                url: require('../../assets/images/plc.jpg'),
                title: 'PLC编程',
                price: 152,
                currentType: 62
            },
            {
                id:14,
                url: require('../../assets/images/bnbddbc.jpg'),
                title: '不能不懂的编程',
                price: 86,
                currentType: 32
            },
            {
                id: 15,
                url: require('../../assets/images/dxpwx.jpg'),
                title: '邓小平文选',
                price: 69,
                collectCount: 36
            },
            {
                id: 16,
                url: require('../../assets/images/lnqj.jpg'),
                title: '列宁全集',
                price: 73,
                collectCount: 16
            },
            {
                id: 17,
                url: require('../../assets/images/mzdsx.jpg'),
                title: '毛泽东思想',
                price: 46,
                collectCount: 38
            },
            {
                id: 18,
                url: require('../../assets/images/mkszy.jpg'),
                title: '马克思主义基本原理',
                price: 88,
                collectCount: 58
            },
        ]
        state.list = MyList
        state.id = router.currentRoute.value.query.id-1

        return {
            ...toRefs(state)
        }
    }
}
</script>
